<template>
  <div class="content-page" :class="{'bg':hasBg}" ref="contentPage" :style="{ overflow: overflow }">
    <slot></slot>
    <div ref="footer" :style="{ height: footerHeight+'px' }">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { classListPrototypeToIE } from '@/utils/util'
export default {
  name: 'ContentPage',
  props: {
    hasBg: { // 去掉白色背景
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      pageHeight: 0,
      footerHeight: 0,
      overflow: 'auto'
    }
  },
  created () {
    //  classList属性在IE9及IE8下的兼容性处理
    classListPrototypeToIE()
  },
  methods: {
    /**
     * 修改AntTab 滚动条的高度
     * @param {Object} parentElement
     */
    updateAntTabScrollHeight (antTable) {
      // TO_DO 遍历元素方式 后续优化
      const antSpinContainer = antTable.children[0].children[0]
      let antPageHeight = 32 // 分页条的高度
      if (antSpinContainer.lastChild.classList.contains('ant-pagination')) {
        antPageHeight = antSpinContainer.lastChild.offsetHeight
      }
      const antTableBody = antSpinContainer.children[0].children[0].children[0].children[1]
      // 默认有加表头和分页计算
      const scrollHeight = this.footerHeight - antTableBody.offsetTop - antPageHeight - 12
      antTableBody.style['max-height'] = scrollHeight + 'px'
    },
    $_resizeHandler () {
      const contentPageElement = this.$refs.contentPage
      const footerElement = this.$refs.footer
      const contentPageHeight = contentPageElement.offsetHeight
      this.pageHeight = contentPageHeight
      if (footerElement.children.length > 0) {
        this.footerHeight = contentPageHeight - footerElement.offsetTop - 20
        // 如果是最后是antTable 内容元素自动撑满剩余高度，出现滚动条
        const footerChildren = footerElement.children[0]
        if (footerChildren.classList.contains('ant-table-wrapper')) {
          this.updateAntTabScrollHeight(footerChildren)
        } else {
          footerChildren.style.height = '100%'
        }
        this.overflow = 'hidden'
      } else {
        this.overflow = 'auto'
      }
    }
  },
  mounted () {
    this.$_resizeHandler()
  },
  beforeMount () {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.$_resizeHandler)
  }
}
</script>

<style lang="less" scoped>
.content-page {
  height: 100%;
  width: 100%;
  position: relative;
}

.bg{
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}
</style>
